@import 'variables'
@import 'mixins'
@import 'nib'


inspector-row-height = 21px
.inspector-footer
  margin-top: 6px
  // background-color: #EEF1F8
  font-size: 12px
  width: 100%
  white-space: normal
  .row-toggle
    float: right
    display: block
    width: inspector-row-height
    height: inspector-row-height
    line-height: inspector-row-height
    text-align: center
    cursor: pointer
    display: none

  .actions
    absolute: right 0px
    top: 3px

  &.contracted
    max-height: 21px
    overflow: hidden

  .inspector-footer-row
    line-height: 21px


  .inspector-footer-row > ul
    word-break: break-word
    margin-top: -3px
    line-height: 21px
    li
      vertical-align: middle
    li.pair
      font-size: 13px
    .key
      float: left
      font-weight: 800
      color: darken(inspector-font-color, 50%)
    .value
      padding-left: 3px
      overflow: hidden
      float: left
      white-space: pre-wrap

    .inspector-icon
      .fa
        margin-right: 5px
        margin-left: 3px

    .colors, .node-sizes, .arrow-widths, .attributes
      ul.list-inline > li
        padding-left: 1px
        line-height: 0
    .colors, .node-sizes, .arrow-widths
      li
        a
          background-color: #aaa
          display: inline-block
          height: 12px
          width: 12px
          margin-top: 1px
          line-height: 0
          opacity: 0.4
          &.active, &:hover
            opacity: 1
    .node-sizes a, .colors a, .colors a
      border-radius: 50%
    .attribute
      user-select: none
      display: inline-block
      padding: 1px 6px
      font-size: 12px
      line-height: 12px
      color: #9195A0
      border: 1px solid #9195A0
      overflow: hidden
      border-radius: .25em
      margin-right: 0
      font-weight: bold
      &:hover
        border-color: #aaa
        color: #aaa
      &.selected
        color: white
        background-color: #9195A0


.inspector-handle
  position: absolute
  bottom: 0
  right: 0
  width: 42px
  height: 42px
  background: #fff
  color: #9b9da2
  text-align: center
  font-size: 16px
  padding-top: 10px
  border-left: 1px solid #dfe5f0
  border-top: 1px solid #dfe5f0
  transist: all 0.2s
  &:hover
    background: #4B4F58
    color: #fff

.inspector
  opacity: 0.95
  -webkit-font-smoothing: initial
  position: absolute
  z-index: 5010
  color: inspector-font-color
  background-color: inspector-bg-color
  top: 0
  right: 0
  bottom: 0
  width: 320px
  overflow: hidden

  // Bootstrap overrides
  ul.list-inline li:first-child
    padding-left: 0
  ul.list-inline li:last-child
    padding-right: 0
  ul.list-inline > li
    padding-left: 3px
    padding-right: 3px
  .nav
    margin-bottom: 0
  .nav-tabs
    border-bottom: 0
    > li
      margin-bottom: 0
  .nav-tabs > .active > a, .nav-tabs > .active > a:hover
    color: inspector-tab-font-active-color
    background-color: inspector-bg-color
    border: none
  .nav-tabs > li > a
    border: none
    color: inspector-tab-font-color
    background-color: inspector-tab-bg-color
    padding: 0 12px;
    line-height: 39px;
  li
    line-height: 1px
  .dropdown
    display: inline

  .header
    -webkit-font-smoothing: antialiased
    font-size: 15px
    font-weight: bold
    line-height: 34px
    padding-left: 10px
    overflow: hidden
    user-select: none
    background-color: inspector-header-color
    .preview
      width: 10px
      height: 10px
      border-radius: 50%
      display: inline-block
      margin-right: 6px
    a.close
      font-size: 14px
      color: #fff
      float: right
      padding: 9px 12px
      opacity: 0.8

  .inspector-body
    position: absolute
    top: 34px
    bottom: 0
    left: 0
    right: 0
    overflow: auto

  .sections > li
    line-height: 1.3em
    padding: 18px 14px
    border-bottom: 1px solid inspector-divider-color
    a
      color: inspector-font-color
    .dropdown-menu > li > a
      color: inspector-bg-color
      &:hover
        color: #fff
    .dropdown-toggle
      font-weight: bold
    &:last-child
      border-bottom: none
    i
      margin-top: -2px
      vertical-align: middle
      font-size: 18px
      display: inline-block
      width: 29px
    &.colors, &.node-sizes, &.arrow-widths
      padding-top: 10px
      padding-bottom: 11px
      a
        position: relative
        display: inline-block
        background-color: #FFF
        line-height: 0
        overflow: hidden
        opacity: 0.3
        &:after
          content: ' '
          stretch()
          background-color: #fff
          width 50%
          opacity: 0.20
        &:hover, &.active
          opacity: 1
    &.colors, &.node-sizes
      a
        border-radius: 50%
    &.colors
      a
        width: 36px
        height: 36px
        border: 3px solid inspector-bg-color
        &:hover, &.active
          width: 36px
          height: 36px
          border: none
    &.arrow-widths
      a
        height: 30px

    &.pair
      font-size: 12px
      overflow: hidden
      .key
        text-align: right
        margin-right: 1em
        width: 90px
        float: left
        color: darken(inspector-font-color, 30%)
      .value
        overflow: hidden
    &.empty
      color: darken(inspector-font-color, 30%)
      text-align: center
      font-style: italic
      padding: 18px 24px

  .attribute
    user-select: none
    display: inline-block
    padding: 1px 6px
    font-size: 12px
    background-color: rgba(0, 0, 0, 0);
    color: #9195A0;
    border: 1px solid #7E8491;
    overflow: hidden;
    border-radius: .25em;
    margin-right: 6px;
    margin-bottom: 2px;
    font-weight: bold;
    &:hover
      border-color: #FFF;
      color: #FFF;

  ul.tight
    li.pair
      padding-top: 6px
      padding-bottom: 6px
      &:first-child
        padding-top: 14px
      &:last-child
        padding-bottom: 14px

/*
 * Animations
 */
.inspector-slide-in.ng-hide-add, .inspector-slide-in.ng-hide-remove {
  transition: all 0.3s
  display: block !important;
}
.inspector-slide-in.ng-hide-add.ng-hide-add-active,
.inspector-slide-in.ng-hide-remove {
  top: 100%
}
.inspector-slide-in.ng-hide-add,
.inspector-slide-in.ng-hide-remove.ng-hide-remove-active {
  top: 0%
}
